import 'package:flutter/material.dart';
import 'package:ui_templates/introduction_animation_page/care_page.dart';
import 'package:ui_templates/introduction_animation_page/center_next_button.dart';
import 'package:ui_templates/introduction_animation_page/mood_diary_page.dart';
import 'package:ui_templates/introduction_animation_page/relax_page.dart';
import 'package:ui_templates/introduction_animation_page/splash_page.dart';
import 'package:ui_templates/introduction_animation_page/top_button_skip.dart';
import 'package:ui_templates/introduction_animation_page/welcome_page.dart';

class IntroductionAnimationPage extends StatefulWidget {
  const IntroductionAnimationPage({super.key});

  @override
  State<IntroductionAnimationPage> createState() =>
      _IntroductionAnimationPageState();
}

class _IntroductionAnimationPageState extends State<IntroductionAnimationPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 8));
    _controller.animateTo(0);
    _controller.addListener(() {
      print("当前动画value:${_controller.value}");
    });

    /*
    * 首先你先把这些页面的initiate中的动画播放给关了
    * 然后在主页面开启动画，但是直接在一开始就停止，这样就能显示第一个页面
    * 在该种情况下，center是不需要出现的，我们可以判断进度
    *
    *
    * */

    super.initState();
  }

  void centerOnTap() {
    // _controller.animateTo(.2);
    //relax页面显示完成
    // _controller.animateTo(.4);
    //relax 的内容移除，但此时care页面完全进入
    // _controller.animateTo(.6);
    //careD额内容移除 mood的内容进入
    // _controller.animateTo(.8);
    // _controller.animateTo(1);

    if (_controller.value < .2) {
      print("splash");
    } else if (_controller.value >= 0.2 && _controller.value < .4) {
      print("relax");
      _controller.animateTo(.4);
    } else if (_controller.value >= 0.4 && _controller.value < .6) {
      print("care");
      _controller.animateTo(.6);
    } else if (_controller.value >= 0.6 && _controller.value < .8) {
      print("mood");
      _controller.animateTo(.8);
    } else {
      print("welcome");
    }
  }

  void goBack() {
    double value = _controller.value;
    if (value > 0.2 && value <= 0.4) {
      _controller.animateBack(0.2);
    } else if (value > 0.4 && value <= 0.6) {
      _controller.animateBack(0.4);
    } else if (value > 0.6) {
      _controller.animateBack(0.6);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //clearMind Relax Care MoodDiary Welcome
      body: Stack(
        children: [
          /*
          * 0,0.2  SplashPage
          * 0.2,0.4   RelaxPage
          * 0.4,0.6   CarePage
          * 0.6,0.8   MOodDiaryPage
          * 0.8,1.0   WelcomePage
          * */
          SplashPage(animationController: _controller),
          RelaxPage(animationController: _controller),
          CarePage(animationController: _controller),
          MOodDiaryPage(animationController: _controller),
          WelcomePage(animationController: _controller),
          TopButtonAndSkip(
            goBack: goBack,
            skipPages: () {
              _controller.duration = const Duration(seconds: 4);
              _controller.animateTo(1);
              if (_controller.value == 1) {
                _controller.duration = const Duration(seconds: 8);
              }
            },
            animationController: _controller,
          ),
          CenterNextButton(
              animationController: _controller, centerOnTap: centerOnTap),
        ],
      ),
    );
  }
}
